<template>
  <div>
      <van-nav-bar
        title="栏目管理"
        left-arrow
        @click-left="$router.back()"
      ></van-nav-bar>
      <div class="group follow ">
          <h3 class="tittle">已关注栏目</h3>
          <p class="desc">点击删除以下频道</p>
          <div class="list">
              <span 
                class="item"
                v-for="item in followList"
                :key="item.id"
                @click="removeFn(item)"
              >{{item.name}}</span>
          </div>
      </div>
      <div class="group unfollowList">
          <h3 class="tittle">未关注注栏目</h3>
          <p class="desc">点击删除以下频道</p>
          <div class="list">
              <span 
                class="item"
                v-for="item in unfollowList"
                :key="item.id"
                @click="addFn(item)"
              >{{item.name}}</span>
          </div>
      </div>
  </div>
</template>

<script>
import {getCategoryAPI} from '../apis/calegory';
import {
    getCate,
    getToken,
    getunCate,
    setCate,
    setUnCate,
    } from '../utils/localData';

export default {
    data () {
        return {
            // 已关注的栏目
            followList:getCate(),
            // 未关注的栏目
            unfollowList:getunCate(),
        }
    },
  async created () {
    //   const res = await getCategoryAPI();
    //   res.data.data.splice(0,2)
    //   console.log(res.data.data)
    /* if (getToken()) {
        // .splice()   可以用于删除数组的数据，改变原数组
      // 💥 注意：.splice() 的返回值是 被删除的元素。
      res.data.data.splice(0, 2);
    }else{
        // 如果未登录，需要删除掉前一项(头条)
        res.data.data.splice(0,1)
    }*/
     
    // 如果本地存储两个数组都为空，表示从未请求过数据，需要发送请求获取栏目数据
    if(this.followList.length===0&&this.unfollowList.length===0){
       const res = await getCategoryAPI();
        if (getToken()) {
            res.data.data.splice(0, 2);
        }else{
            res.data.data.splice(0, 1);
        }
        // 把操作后的数组存储起来，用于页面渲染
        this.followList= res.data.data; 
    }
    
  },
  methods: {
      // 点击移除已关注栏目
      removeFn(theItem){
          if(this.followList.length===1){
              return this.$toast.fail("至少保留一个栏目");
          }
          // 在已关注栏目中移除
          this.followList=this.followList.filter((item)=>item.id !== theItem.id);
          this.unfollowList.unshift(theItem)
      },
       // 点击添加关注栏目 - 业务逻辑参考移除
      addFn(theItem){
          // 在未关注栏目中移除
          this.unfollowList=this.unfollowList.filter((item)=>item.id !== theItem.id)
          this.followList.unshift(theItem)
      }
  },
  watch:{
     // 🔔 关注的栏目数据发生改变，需要把数据存储到本地
      followList(){
        // 把关注的栏目存储到本地
          setCate(this.followList);
          // 把未关注的栏目存储到本地
          setUnCate(this.unfollowList);
      }
  }
}
</script>

<style lang="less" scoped>
.group {
  padding: 10px;
  .title {
    font-size: 15px;
    margin: 10px 0;
  }

  .desc {
    font-size: 12px;
    color: #999;
    margin: 5px 0;
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    .item {
      height: 35px;
      width: 23%;
      margin: 1%;
      border: 1px solid #ccc;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;
      position: relative;
      &::after {
        position: absolute;
        right: 5px;
        top: 0px;
      }
    }
  }
}
.follow .list .item::after {
  content: "-";
}
.unfollowList .list .item::after {
  content: "+";
  color: green;
}
</style>